.grid_pattern_layout {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    background-color: #F1F3F5;
}
.div_1X2_container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    padding-left: 4px;
    padding-right: 4px;
}
.div_2x2_container {
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
}
.player_thumbnail_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.controller_2X2_button {
    width: 32px;
    height: 32px;
    icon-width: 32px;
    icon-height: 32px;
    margin: 4fp;
}
.div_tool_2x2_container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.device_list_2x2_container {
    background-color: #FFFFFF;
    height: 100%;
    padding-left: 10fp;
    padding-right: 10fp;
    align-items:center;
    justify-content: center;
}
.img {
    object-fit: contain;
}

.div_2X4_container {
    flex-direction: row;
    width: 100%;
    height: 100%;
    background-color: white;
}
.device_list_2x4_container {
    flex-weight: 1;
    background-color: #F1F3F5;
    align-items: center;
    justify-content: center;
    margin-top: 10fp;
    margin-right: 15fp;
    margin-bottom: 10fp;
    margin-left: 5fp;
}

.device_list_2X4_wraper {
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
}
.device_list_2X4_item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    click-color: gainsboro;
    padding-left: 12fp;
}
.device_name_2X4_text {
    font-size: 16fp;
    margin-bottom: 6fp;
}

.div_player_2x4_container {
    flex-weight: 1;
    margin-top: 10fp;
    margin-left: 15fp;
    margin-bottom: 10fp;
    margin-right: 5fp;
}


.div_4x4_container {
    flex-direction: column;
}
.device_list_container {
    background-color: #FFFFFF;
    height: 40fp;
    padding-left: 10fp;
    padding-right: 10fp;
    align-items:center;
    justify-content: center;
}
.device_list_wraper {
    flex-weight: 1;
    height: 24fp;
/*    scrolleffect: spring;*/
}
.device_name_text_2X2 {
    font-size: 16fp;
    margin-top: 5fp;
    margin-bottom: 5fp;
}
.device_list_item {
    flex-direction: row;
    align-items:center;
    justify-content: center;
    click-color: gainsboro;
}
.device_name_4X4_text {
    height: 100%;
    font-size: 14fp;
    padding-right: 4fp;
}
.connected_selected {
    color: red;
}
.connected_unselected {
    color: cornflowerblue;
    border-bottom: 0fp;
}
.disconnected {
    color: darkgrey;
}
.device_button {
    background-color: #FFFFFF;
    justify-content: center;
    align-items: center;
    width: 24fp;
    height: 24fp;
    margin-right: 10fp;
}

.player_controller_container {
    align-items: center;
    justify-content: center;
    margin-bottom: 10fp;
}

.play_list_container {
    flex-direction: column;
    background-color: #FFFFFF;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 4fp;
    margin-bottom: 4fp;
    padding-top: 10fp;
}
.play_list_wraper {
}
.play_list_loading_text {
    margin-bottom: 10fp;
}
.play_list_loading_refresh_text{
    color: blue;
}
.play_list_item {
    width: 100%;
    flex-direction: row;
    background-color: white;
    padding-left: 6fp;
    padding-bottom: 6fp;
    padding-top: 6fp;
    padding-right: 6fp;
    border-radius: 0fp;
}
.play_list_image {
    width: 26px;
    height: 20px;
    object-fit: cover;
}
.playing_cls {
    padding-left: 10fp;
    padding-right: 10fp;
    background-color: lightblue;
    border-radius: 6fp;
}
.play_list_title {
    font-size: 16px;
    flex-weight: 9;
    max-lines: 1;
    text-overflow: ellipsis;
}
.play_list_blank{
    flex-weight: 1;
}
.play_list_subtitle {
    font-size: 14px;
    flex-weight: 5;
    max-lines: 1;
    text-overflow: ellipsis;
}
.play_list_play_img {
    width: 26px;
    height: 26px;
    icon-width: 26px;
    icon-height: 26px;
    flex-weight: 2;
}
.play_list_state{
    font-size: 14px;
}

.bottom_bar_container {
    width: 100%;
    background-color: #FFFFFF;
}
.tool_bar_container {
    width: 100%;
    align-items: center;
    justify-content: center;
}
.player_controller_container_4X4 {
    flex-weight: 1;
    align-items: center;
}
.volume_container_4X4 {
    flex-weight: 1;
    align-items: center;
}

.waiting_cls {
    background-color: #bfbfbf;
}

.controller_button {
    background-color: #FFFFFF;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 6px;
}
.controller_progress {
    height: 44px;
}

.div_2X2_content {
    flex-direction: column;
}
.div_2x2_text {
    color: whitesmoke;
    font-family: fangyuan-midi;
    font-size: 24fp;
    flex-weight: 1;
    text-align: center;
    padding: 10fp;
    margin-bottom: 20fp;
}
@font-face {
    font-family: fanfang;
    src: url("/common/ffz.ttf");
}
@font-face {
    font-family: fangyuan-midi;
    src: url("/common/fymd.ttf");
}